<template>
  <div class="content" @click="look" v-if="introduce.length !==0">
      <img v-show="isShow" :src="src" alt="">
      <div class="movieDetail" :class="isShow?'':'active'">
          <div>{{introduce[0]}}</div>
          <div>{{introduce[1]}}</div>
          <div>{{introduce[2]}}</div>
          <div class="showMore" v-show="isShow"></div>
      </div>
  </div>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity';
export default {
    props:{
        introduce:{
            type:Array,
            defalut:() => []
        },
        src:{
            type:String,
            defalut:''
        }
    },
    setup(){
        const state = reactive({
            detailData:{
                "direct":'史蒂文·斯皮尔伯格',
                "act":'泰尔·谢里丹,奥利维亚·库克,本·门德尔森,马克·里朗斯',
                "story":'剧情：在2045年，现实世界衰退破败，人们沉迷于VR(虚拟现实)游戏“绿洲(OASIS)”的虚幻世界里寻求慰藉。马克·里朗斯饰演的“绿洲”的创始人临终前宣布，将亿万身家全部留给寻获他隐藏的彩蛋的游戏玩家，史上最大规模的寻宝冒险就此展开，由泰伊·谢里丹饰演的男主角韦德·沃兹(Wade Watts/Parzival)和数十亿竞争者踏上奇妙而又危机重重的旅途。'
            },
            isShow:true
    })
    const look = ()=>{
        state.isShow = !state.isShow
    }
    return{
        ...toRefs(state),
        look
    }
    }
}
</script>

<style lang="less" scoped>
.content{
        display: flex;
        margin: 20px;
        img{
            width: 80px;
            height: 113px;
            margin-right: 10px;
        }
        .movieDetail{ 
            position: relative;
            padding: 0;
            color: #999;
            font-size: 12px;
            line-height: 19px;
            height: 113px;
            overflow: hidden;
            .showMore{
                position: absolute;
                top: 0px;
                right: 0;
                width: 100%;
                padding: 38px 0 19px 0;
                height: 100px;
                background: linear-gradient(to bottom, rgba(34,34,34,0) 0%,rgba(34,34,34,1) 100%);
                text-align: center;
                //display: none;
            }
        }
        .active{
            height: auto;
        }
    }
</style>